<template>
	<my-box title="井下人员信息">
		<my-echarts :options="options"></my-echarts>
	</my-box>
</template>

<script setup>
const props = defineProps({
	data: {
		type: Array,
		required: true,
		default: () => []
	},
	total: {
		type: [Number, String],
		required: true
	},
	fileType: {
		type: Object,
		default: () => ({ name: 'name', value: 'value' })
	}
})

// 井下人员信息
const options = computed(() => {
	let m2R2Data = []

	props.data.forEach((item) => {
		m2R2Data.push(
			{ value: item[props.fileType.value], name: item[props.fileType.name] },
			{
				value: props.total / 100,
				itemStyle: {
					color: 'rgba(0,0,0,0)'
				},
				label: {
					normal: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				tooltip: {
					show: false
				}
			}
		)
	})

	return {
		colorList: ['#D56383', '#00FF95', '#FFE900', '#F5B157', '#1DA7FF', '#2967EA'],
		title: [
			{
				text: `{a|当前} {c|${props.total}} {a|人}`,
				subtext: '限制 500 人',
				textStyle: {
					rich: {
						a: {
							color: 'rgba(255,255,255,0.7)',
							fontSize: 14
						},
						c: {
							color: 'rgba(255,255,255,1)',
							fontSize: 26
						}
					}
				},
				subtextStyle: {
					fontSize: 14,
					color: 'rgba(255,255,255,0.7)'
				},
				textAlign: 'center',
				x: '50%',
				y: '40%'
			}
		],
		tooltip: {
			backgroundColor: 'rgba(3, 15, 39, 0.8)',
			borderColor: 'rgba(76, 107, 209, 0.5)',
			extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
			textStyle: {
				color: 'rgba(255, 255, 255, 1)'
			}
		},
		series: [
			{
				name: '标题',
				type: 'pie',
				radius: ['55%', '70%'],
				avoidLabelOverlap: true,
				label: {
					normal: {
						show: true,
						formatter: function ({ data: { name, value } }) {
							return `{a|${name}}\n{b|${value}}`
						},
						rich: {
							a: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 12, fontFamily: '思源黑体', lineHeight: 20 },
							b: { color: 'rgba(255, 255, 255)', fontSize: 14, fontWeight: 'bold', fontFamily: '思源黑体', lineHeight: 20 }
						}
					}
				},
				labelLine: {
					show: true
				},
				data: m2R2Data
			}
		]
	}
})
</script>
